<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<div id="root"></div>

<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel-min.js"></script>

<script type="text/babel">
  class App extends React.Component {

    constructor() {
      super();                
      this.state = {

      }
    }
    render() {
      /**
       * React借助babel：div -> React.createElement("div", {class, id}, chlidren[])
       * 所有的jsx最终都会被转换成 React.createElement() 的函数调用, 所以本质上就是 Javascript 的方法调用和对象创建！
       * element = React.createElement() 就是虚拟DOM，使用 javascript对象 来模拟 html 标签
       * 最终 React 再通过虚拟DOM树，渲染出一个真实HTML页面
       */
      return (
        <div>
          <div className="header">header</div>
          <div className="content">
            <div>Banner</div>
            <ul>
              <li>列表数据1</li>
              <li>列表数据1</li>
              <li>列表数据1</li>
              <li>列表数据1</li>
              <li>列表数据1</li>
            </ul>
          </div>
          <div className="footer">footer</div>
        </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector("#root"))
  root.render(<App/>)

</script>

</body>
</html>
